<template>
	<div>
		<div class="login">
			<p class="copyRight">2017 QuickTech<br>
Copyright © 重庆库克科技</p>
		</div>
		<div class="loginDiv">
			<div class="zy-title">管理信息平台</div>
			<p class="ueselogin">用户登录</p>
			<div class="zy-login">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
					<el-form-item prop="userName">
						<el-input type="text" v-model="ruleForm.userName" auto-complete="off" placeholder="请输入用户名"></el-input>
					</el-form-item>
					<el-form-item prop="pass">
						<el-input type="password" v-model="ruleForm.pass" auto-complete="off" placeholder="请输入密码"></el-input>
					</el-form-item>
					<el-form-item style="">
						<el-button type="primary" style="width: 100%;">登入</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<div></div>
	</div>
</template>

<script>
	export default {
		name: 'login',
		data() {
			return {
				ruleForm: {
					userName: '',
					pass: '',
				},
				rules: {
					userName: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3到 10 个字符',
							trigger: 'blur'
						}
					],
					pass: [{
							required: true,
							message: '请选择活动区域',
							trigger: 'change'
						},
						{
							min: 4,
							max: 20,
							message: '长度在 6到 20 个字符',
							trigger: 'blur'
						}
					],
				}
			};
		},
		methods: {}
	}
</script>

<style scoped>
	.login {
		position: fixed;
		width: 100%;
		height: 100%;
		background: url(../../../static/img/login-bg.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 50% 0;
		z-index: -1;
	}
	
	.zy-title {
		line-height: 40px;
		font-size: 18px;
		color: #fff;
		padding: 5px 15px;
		text-align: center;
		background: #3a3f51;
	}
	
	.zy-login {
		padding: 0 15px;
		background: #fff;
	}
	
	.zy-login .el-form-item.is-required .el-form-item__label:before {
		color: #fff !important;
	}
	
	.el-form-item__content {
		margin-left: 0;
	}
	
	.beijing {}
	
	.ueselogin {
		line-height: 60px;
		background: #fff;
		text-align: center;
	}
	
	.loginDiv {
		z-index: 9999;
		background: #fff;
		border: 1px solid #fff;
		border-radius: 10px;
		overflow: hidden;
		width: 320px;
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.copyRight{
		position: absolute;
		bottom: 0;
		text-align: center;
		left: 50%;
		transform: translateX(-50%);
		color: #fff;
	}
</style>